<template>
  <div>
    
    <div style="margin-bottom: 16px" >
      <a-input-search v-model=sid placeholder="input search text" style="width:300px" @search="onSearch(sid)">
      <a-button slot="enterButton">
        搜索
      </a-button>
    </a-input-search>
      <div>
          <a-modal v-model="visible" :title="curdata.linkman" @ok="handleOk">
              <p>{{curdata}}</p>
          </a-modal>
      </div>
      <div>
    <a-radio-group v-model="value" @change="onChange">
      <a-radio :value="1">
        公司
      </a-radio>
      <a-radio :value="2">
        个人
      </a-radio>
    </a-radio-group>
  </div>
      <div>
          <a-modal v-model="visible1"  @ok="handleOk">
              <p>{{seadata}}</p>
          </a-modal>
      </div>
      <a-button type="primary" :disabled="!hasSelected" :loading="loading" @click="start">
        重选
      </a-button>
      <span style="margin-left: 8px">
        <template v-if="hasSelected">
          {{ `选择 ${selectedRowKeys.length} 条数据` }}
        </template>
      </span>
    </div>
    <h2>缴费查询</h2>
    <a-table
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :columns="columns"
      :data-source="data"
    >
    <a slot="actionOne" slot-scope="record" @click="deleteIt(record.ID)">删除</a>
    </a-table>   
    
  </div>
</template>
<script>
const columns = [
  {
    title: '会员账号',
    dataIndex: 'ID',
  },
  {
    title: '会员期限',
    dataIndex: 'time',
  },
  {
    title: '公司/姓名',
    dataIndex: 'name',
  },
  {
    title: '会员资金',
    dataIndex: 'money',
  },
  {
    title: '联系人',
    dataIndex: 'linkman',
  },
  {
    title: '联系方式',
    dataIndex: 'phone',
  },
  {
    title: '地址',
    dataIndex: 'city',
  },
  {
    title: '',
    key: 'operation-One',
    fixed: 'right',
    scopedSlots: { customRender: 'actionOne' },
    modal2Visible: false,
    visible: false,
  },

];


export default {
  data() {
    return {
      data: [
        {
          ID:"123456",
          time: "2016/8/23--2018/8/23",
          name: "腾讯",
          money: "50000",
          linkman:"杜甫",
          phone:"56785675",
          city:"中关村",
        },
        {
          ID:"1234",
          time: "2016/8/23--2018/8/23",
          name: "腾讯",
          money: "50000",
          linkman:"杜甫",
          phone:"56785675",
          city:"中关村",
        },
        {
          ID:"12456",
          time: "2016/8/23--2018/8/23",
          name: "腾讯",
          money: "50000",
          linkman:"杜甫",
          phone:"56785675",
          city:"中关村",
        },
        {
          ID:"1456",
          time: "2016/8/23--2018/8/23",
          name: "腾讯",
          money: "50000",
          linkman:"杜甫",
          phone:"56785675",
          city:"中关村",
        },
       
        ],
      columns,
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
      visible: false,
      visible1: false,
      curdata:'',
      seadata:'',
      modal2Visible: false,
      modal3Visible: false,
      index: 5,
      value: 1,
    };
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
  },
  methods: {
    start() {
      this.loading = true;
      // ajax request after empty completing
      setTimeout(() => {
        this.loading = false;
        this.selectedRowKeys = [];
      }, 1000);
    },
    setModal1Visible(modal1Visible) {
      this.modal1Visible = modal1Visible;
      console.log(modal1Visible);
    },
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    showModal(curID) {
      this.visible = true;
      let curData = this.data.filter((item) => item.ID === curID)[0];
      this.curdata = curData;
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
      this.visible1=false;
      this.visible2=false;
      this.editIt(this.curdata.ID); 
    },
    onSearch(sid) {
      this.visible1 = true;
      let seaData = this.data.filter((item) => item.ID == sid)[0];
      this.seadata = seaData;
    },
    editIt(id) {
        for(let i=0;i<this.data.length;i++) {
          if(this.data[i].ID === id) {
              this.data[i].state = "已审核";
          }
      }
    },
    deleteIt(id) {
    this.data = this.data.filter((item) => item.ID !== id)
    },
    test () {
      this.data.forEach((item,index) => {
        item.number = index
      })
    },
    onChange(e) {
      console.log('radio checked', e.target.value);
    },
  },
  

}
</script>

